<template>
<view>
    <!-- 头部选项卡 -->
   <view class="head-nav">
      <view :class="navIndex==1?'activite':''" @click="checkIndex(1)">车辆查询</view>
      <view :class="navIndex==2?'activite':''" @click="checkIndex(2)">参数查询</view>
    </view>
    <!-- 内容切换 -->
   <view class="content" v-if="navIndex==1" >
	<view class="index"  >
 		<view class="itemBox" :class="{active:brandIndex!==null}" >
 			<picker @change="bindPickerBrandChange" :value="brandIndex" range-key="name" :range="carBrand">
 				{{brandIndex===null?'请选择吊车品牌':carBrand[brandIndex].name}}
 			</picker>
 		</view>
 		<view class="itemBox" :class="{active:modelIndex!==null}"  >
 			<picker @change="bindPickerModelChange" :value="modelIndex" range-key="name" :range="carModel">
 				{{modelIndex===null?'请选择吊车型号':carModel[modelIndex].name}}
 			</picker>
 		</view>
 			<view class="button" @click="search()">查询</view>
 	</view>

    </view>
	<!-- 参数查询 -->
    <view class="content" v-if="navIndex==2">
		<view class="indexa">
			<view class="itemBoxa" v-for="(item,key) in attrs" :key="key" v-if="item.show">
				<view class="labela">
					{{item.label}}
				</view>
				<view class="inputBoxa" :class="{active:values[item.name]}">
					<picker   @change="bindPickerChange($event,item)" :value="item.value" range-key="value" :mode="item.mode"
						@columnchange="columnchange($event,item)" :range="item.list">
						{{values[item.name]?values[item.name]:item.placeholder}}
					</picker>
				
					
					<view v-if="item.showWarning" class="warninga">{{item.warning}}</view>
					<view class="child"  v-if="bates"> <input type="text" placeholder="请选择" />~<input type="text" placeholder="请选择"/> </view>
					</view>
				</view>
	
			<view class="buttona" @click="searchs()">查询吊车</view>
		</view>


    </view>


</view>
</template>

<script>
	import {
		getBrandList,
		getCraneList
	} from '@/api/crane.js'
	// 条件查询
		import {
			combinationList,
			raduisList,
			weightList,
			momentPercentageList,
			mainArmLengthList,
			jibLengthList,
			mineTowerLengthList
		} from '../../searchCrane/data.js';
		import {
			goPage
		} from '@/utils/crane';
		const typeMap = ['main', 'mainTower', 'mainJib'];
  export default{
    data(){
      return{
        navIndex:1,
		carBrand: [],
		carModel: [],
		brandIndex: null,
		modelIndex: null,
		brandList: [],
        navList:["选项卡一","选项卡二"],
        listIndex:0,
						values: {
							combination: null,
							raduis: null,
							weight: null,
							momentPercentage: null,
							mainArmLength: null,
							jibLength: null,
							mineTower: null
						},
										attrs: [{
											name: 'combination',
											label: '臂长组合模式：',
											warning: '请输入臂长组合模式',
											showWarning: false,
											placeholder: '请选择',
											list: combinationList,
											mode: 'selector',
											value: 0,
											show: true,
						
										}, {
											name: 'raduis',
											label: '作业半径（m）：',
											warning: '请输入臂长组合模式',
											showWarning: false,
											placeholder: '请选择',
											list: raduisList,
											mode: 'selector',
											value: 0,
											show: true,
						
										}, {
											name: 'weight',
											label: '起重量（T/吨）：',
											warning: '请输入起重量',
											showWarning: true,
											placeholder: '请选择',
											list: weightList,
											mode: 'selector',
											value: 0,
											show: true,
						
										}, {
											name: 'momentPercentage',
											label: '力矩百分比范围（%）：',
											warning: '请输入力矩百分比范围',
											showWarning: false,
											placeholder: '请选择',
											list: momentPercentageList,
											mode: 'multiSelector',
											value: [0, 0],
											show: true,
						
										}, {
											name: 'mainArmLength',
											label: '主臂长度范围（m）：',
											warning: '请输入主臂长度范围',
											showWarning: false,
											placeholder: '请选择',
											list: mainArmLengthList,
											mode: 'multiSelector',
											value: [0, 0],
											show: true,
						
										}, {
											name: 'jibLength',
											label: '副臂长度范围（m）：',
											warning: '请输入副臂长度范围',
											showWarning: false,
											placeholder: '请选择',
											list: jibLengthList,
											mode: 'multiSelector',
											value: [0, 0],
											show: false,
						
										}, {
											name: 'mineTower',
											label: '矿塔长度范围（m）：',
											warning: '请输入矿塔长度范围',
											showWarning: false,
											placeholder: '请选择',
											list: mineTowerLengthList,
											mode: 'multiSelector',
											value: [0, 0],
											show: false,
						
										}]
      }
    },
		async onLoad() {
			uni.showLoading();
			await this.getBrandList();
			uni.hideLoading();
			
		},
		computed: {
		
		},
    methods:{
					bindPickerChange: function(e, data) {
						const val = e.target.value;
						if (data.name === 'combination') {
							if (Number(val) === 0) {
								this.attrs[5].show = false;
								this.attrs[6].show = false;
							} else if (Number(val) === 1) {
								this.attrs[5].show = false;
								this.attrs[6].show = true;
							} else if (Number(val) === 2) {
								this.attrs[5].show = true;
								this.attrs[6].show = false;
							}
						}
						data.value = val;
						if (Array.isArray(e.target.value)) {
							this.values[data.name] = data.list[0][val[0]].value + ' ~ ' + data.list[1][val[1]].value;
						} else {
							this.values[data.name] = data.list[val].value;
						}
						const name = data.name;
						const mode = data.mode;
						this.attrs = [...this.attrs];
					},
					columnchange: function(e, data) {
						if (e.target.column === 0) {
							if (e.target.value > data.value[1]) {
								data.value = [e.target.value, e.target.value]
							}
						} else {在···
							if (e.target.value < data.value[0]) {
								data.value = [e.target.value, e.target.value]
							}
						}
						this.attrs = [...this.attrs];
					},
					searchs() {
						if (!(this.values.combination &&
							this.values.raduis &&
							this.values.weight &&
							this.values.momentPercentage &&
							this.values.mainArmLength)
						) {
							return uni.showToast({
								title: '请配置完全',
								icon: 'none'
							})
						}
		
						if (Number(this.attrs[0].value) === 1) {
							if (!this.values.mineTower) {
								return uni.showToast({
									title: '请配置完全',
									icon: 'none'
								})
							}
						} else if (Number(this.attrs[0].value) === 2) {
							if (!this.values.jibLength) {
								return uni.showToast({
									title: '请配置完全',
									icon: 'none'
								})
							}
						}
						const url = '/pages/searchCarList/index';
						goPage({
							url
						});
					},
      checkIndex(index){
        this.navIndex =index;
      },
      
      checkListIndex(index){
        this.listIndex=index;
      },
	  
			bindPickerBrandChange: function(e) {
				
				this.brandIndex = e.target.value;
				this.getCarList(this.carBrand[this.brandIndex]);
				console.log(this.carBrand);
			},
			bindPickerModelChange: function(e) {
				this.modelIndex = e.target.value
			},
			search: function() {
				if (this.brandIndex === null || this.modelIndex === null) {
					uni.showToast({
						title: `请选择吊车${this.brandIndex === null ?'品牌':'型号'}`,
						icon: 'none',
						duration: 1500
					});
					return;
				}
				const craneid = this.carModel[this.modelIndex].id;

				uni.navigateTo({
					url: `/pages/carDetails/index?craneid=${craneid}`,
					complete: (e) => {
						console.log('-----', e);
					}
				})
			
			},
			getBrandList: function() {
				const _this = this;
				return getBrandList().then(res => {
					if (res.data) {
						_this.brandList = res.data;
						_this.carBrand = res.data;
					}
				})
			},
			getCarList: function(id) {
				const _this = this;
				getCraneList({
					cbrandid: id
				}).then(res => {
					_this.modelIndex = null;
					_this.carModel = res.data.craneList;
				})
			}
		
	// ..........
	
	}
  }

</script>

<style lang="scss" scoped>
.head-nav{
    width: 50%;
    margin:20rpx auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
	// background-color: #007AFF;	
	font-size: 30rpx;
  }
  .activite{
    font-weight: bold;
    border-bottom: 6rpx solid #0065d9;
  }
  .head-nav>view{
    padding-bottom: 10rpx;
  }
  .box{background: #008000;}
	page {
		height: 100%;
	}

	.index {
		height: 670upx;
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.itemBox {
			height: 66upx;
			width: 480upx;
			line-height: 66upx;
			font-size: 30upx;
			color: #CCCCCC;
			border-bottom: 1upx solid #CCCCCC;
			position: relative;
			margin-top: 30upx;
			
			// background-color: #4CD964;

			&+.itemBox {
				margin-top: 80upx;
				margin-bottom: 30upx;
							// background-color: #DF1E14;
			}

			&.active {
				color: #212121;
			}

		}

		.button {
			width: 480upx;
			height: 85upx;
			margin-top: 50upx;
			line-height: 85upx;
			font-size: 30upx;
			text-align: center;
			color: #FFFFFF;
			border-radius: 8upx;
			background-color: #0081FF;
		}
	}
	// ....
		page {
			height: 100%;
		}
	
		.indexa {
			height: 100%;
			background-color: #FFFFFF;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 60upx;
	
			.itemBoxa {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				width: 100%;
				// margin-bottom: 50upx;
				// line-height: 66upx;
				font-size: 30upx;
				color: #CCCCCC;
				// background-color:#4CD964 ;
	
				.labela {
					height: 60upx;
					line-height: 60upx;
					font-size: 28upx;
					color: #212121;
					// background-color:#D22516 ;
				}
	
				.inputBoxa {
					// width: 320upx;
					// height: 72upx;
					width: 100%;
					height: 80upx;
					border: 1px solid #999999;
					border-radius: 8upx;
					line-height: 80upx;
					font-size: 28upx;
					padding: 0 16upx;
					position: relative;
					// background-color:pink ;
					// background-color: black;
	
					&.active {
						color: #212121;
					}
	
					&::after {
						position: absolute;
						width: 44upx;
						height: 44upx;
						right: 0;
						top: 50%;
						margin-top: -22upx;
						// background: url(../../searchCar/images/downArrow.png) 0 0 /100% 100%;
						content: '';
					}
	
					.warninga {
						position: absolute;
						bottom: 30upx;
						left: 40%;
						line-height: 30upx;
						font-family: 'PingFangSC-Regular';
						font-size: 22upx;
						color: #999999;
						letter-spacing: 0;
						text-align: left;
						font-weight: 400;
					}
				}
			}
	
			.buttona {
				width: 480upx;
				height: 85upx;
				margin-top: 40upx;
				line-height: 85upx;
				font-size: 30upx;
				text-align: center;
				color: #FFFFFF;
				border-radius: 8upx;
				background-color: #0081FF;
			}
			.child{
				flex: 1;	
				display: flex;
				// justify-content:ar
				line-height: 80upx;
				font-size: 28upx;
				color: #CCCCCC;
			}
			.child input{
				
				width: 300upx;
				height: 96upx;
				border-radius: 10upx;
				border: 1upx solid #000000;
			}
		}
</style>
